<template>
  <div class="wrap">
    <!-- 顶部结构 -->
    <div class="top">
      <div class="hosname">{{ workData.baseMap?.hosname }}</div>
      <div class="line"></div>
      <div>{{ workData.baseMap?.bigname }}</div>
      <div class="dot">.</div>
      <div class="hosdepartment">{{ workData.baseMap?.depname }}</div>
    </div>
    <!-- 展示日期 -->
    <div class="center">
      <h1 class="time">{{ workData.baseMap?.workDateString }}</h1>
      <div class="container">
        <div
          class="item"
          @click="changeTime(item)"
          :class="{ active: item.status == -1 || item.availableNumber == -1 ,cur:item.workDate==workTime.workDate}"
          v-for="item in workData.bookingScheduleList"
          :key="item"
        >
          <div class="top1">{{ item.workDate }}{{ item.dayOfWeek }}</div>
          <div class="bottom">
            <div v-if="item.status == -1">停止挂号</div>
            <div v-if="item.status == 0">
              {{
                item.availableNumber == -1
                  ? "已约满"
                  : `有号(${item.availableNumber})`
              }}
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        v-model:current-page="pageNo"
        @current-change="fetchWorkData"
        layout="prev, pager, next"
        :total="workData.total"
      />
    </div>
    <div class="bottom">
      <!-- 即将放号时间 -->
      <div class="will" v-if="workTime.status==1"><span class="time">放号时间待定</span></div>
      <!-- 医生的结构 -->
      <div class="doctor" v-else>
        <div class="am">
          <div class="tip">
            <!-- 顶部文字提示 -->
            <svg
              t="1716972648971"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2640"
              width="16"
              height="16"
            >
              <path
                d="M510.854034 0c-282.117236 0-510.850586 228.73335-510.850586 510.850586s228.73335 510.850586 510.850586 510.850586 510.850586-228.73335 510.850587-510.850586-228.73335-510.850586-510.850587-510.850586z m239.972063 362.831629l26.819656 27.458219-86.206036 84.034921-26.819656-27.458219 86.206036-84.034921zM491.952563 268.835121h38.441506V389.268147H491.952563v-120.433026z m-224.518833 83.779496l91.314542 93.357945-30.267897 29.629334-91.314542-93.357945 30.267897-29.629334z m9.706161 291.567972v5.363931H146.489854v-42.400598h130.522325v37.036667z m412.511849 11.749564h-362.703917c-1.404839-8.939885-2.043402-18.135196-2.043402-27.585932 0-101.020703 82.374657-183.523073 183.39536-183.523073 101.148416 0 183.523073 82.374657 183.523074 183.523073 0 9.323023-0.766276 18.518334-2.171115 27.585932z m46.742828-7.024196V606.379646H875.090502v42.528311H736.394568z"
                fill="#FFD21E"
                p-id="2641"
              ></path>
            </svg>
            <span>上午号源</span>
          </div>
          <div class="docInfo" v-for="doctor in moringArr" :key="doctor.id">
            <!-- 名字技能等 -->
            <div class="left">
              <div class="info">
                <span>{{doctor.title}}</span>
                <svg t="1716975179607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4063" width="18" height="18"><path d="M486.4 921.6V102.4h51.2v819.2z" fill="#67C7F8" p-id="4064"></path><path d="M921.6 204.8h-307.2V153.6h307.2zM921.6 870.4h-307.2v-51.2h307.2z" fill="#F8F8F8" p-id="4065"></path><path d="M870.4 870.4V153.6h51.2v716.8zM614.4 870.4V153.6h51.2v716.8zM102.4 153.6h307.2v51.2H102.4zM102.4 819.2h307.2v51.2H102.4z" fill="#F8F8F8" p-id="4066"></path><path d="M102.4 870.4V153.6h51.2v716.8zM358.4 870.4V153.6h51.2v716.8z" fill="#F8F8F8" p-id="4067"></path></svg>
                <span>{{doctor.docname}}</span>
              </div>
              <div class="skill">
                {{doctor.skill}}
              </div>
            </div>
            <!-- 号码剩余和金额 -->
            <div class="right">
                <div class="money">￥{{doctor.amount}}</div>
                <el-button type="primary">{{doctor.availableNumber}}</el-button>
            </div>
          </div>
        </div>
        <div class="pm">
          <div class="tip">
            <!-- 顶部文字提示 -->
            <svg t="1716974944299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2823" width="16" height="16"><path d="M825.5 424.6h91.3c20.9 0 37.8-16.9 37.8-37.8S937.7 349 916.8 349h-90.2c1.2 11.3 1.9 22.8 1.9 34.4-0.1 14-1.3 27.7-3 41.2zM800.4 667.6c14.8 14.8 38.7 14.8 53.5 0 14.8-14.8 14.8-38.7 0-53.5l-69.8-69.8c-13.1 22-28.5 42.4-46.3 60.6l62.6 62.7zM107.4 424.6h91.3c-1.8-13.5-3-27.2-3-41.2 0-11.6 0.7-23.1 1.9-34.4h-90.2c-20.9 0-37.8 16.9-37.8 37.8s16.9 37.8 37.8 37.8zM246.7 555.3l-58.8 58.8c-14.8 14.8-14.8 38.7 0 53.5 14.8 14.8 38.7 14.8 53.5 0l54.1-54.1c-18.5-17.4-34.9-36.8-48.8-58.2zM474.3 697.3v97c0 20.9 16.9 37.8 37.8 37.8s37.8-16.9 37.8-37.8v-97c-12.4 1.5-25 2.5-37.8 2.5-12.8 0-25.4-1-37.8-2.5zM922.4 267.5H101.8c-20.9 0-37.8-16.9-37.8-37.8s16.9-37.8 37.8-37.8h820.6c20.9 0 37.8 16.9 37.8 37.8s-16.9 37.8-37.8 37.8zM762.6 349.1c1 9.2 1.5 18.5 1.5 28 0 139.2-112.9 252.1-252.1 252.1S260 516.3 260 377.1c0-9.5 0.5-18.8 1.5-28h501.1z" p-id="2824" fill="#2c2c2c"></path></svg>
            <span>下午号源</span>
          </div>
          <div class="docInfo" v-for="doctor in afterArr" :key="doctor.id">
            <!-- 名字技能等 -->
            <div class="left">
              <div class="info">
                <span>{{doctor.title}}</span>
                <svg t="1716975179607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4063" width="18" height="18"><path d="M486.4 921.6V102.4h51.2v819.2z" fill="#67C7F8" p-id="4064"></path><path d="M921.6 204.8h-307.2V153.6h307.2zM921.6 870.4h-307.2v-51.2h307.2z" fill="#F8F8F8" p-id="4065"></path><path d="M870.4 870.4V153.6h51.2v716.8zM614.4 870.4V153.6h51.2v716.8zM102.4 153.6h307.2v51.2H102.4zM102.4 819.2h307.2v51.2H102.4z" fill="#F8F8F8" p-id="4066"></path><path d="M102.4 870.4V153.6h51.2v716.8zM358.4 870.4V153.6h51.2v716.8z" fill="#F8F8F8" p-id="4067"></path></svg>
                <span>{{doctor.docname}}</span>
              </div>
              <div class="skill">
                {{doctor.skill}}
              </div>
            </div>
            <!-- 号码剩余和金额 -->
            <div class="right">
                <div class="money">￥{{doctor.amount}}</div>
                <el-button type="primary">{{doctor.availableNumber}}</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref ,computed} from "vue";
import { reqHospitalWorker ,reqHospitalDoctor} from "@/api/hospital/index";
import { useRoute } from "vue-router";
import type { HospitalWorkerData ,HospitalDoctorResponseData,DocArr,HospitalDoctor} from "@/api/hospital/type";
let pageNo = ref<number>(1);
let limit = ref<number>(6);
let $route = useRoute();
let workData = ref<any>({});
// 获取可挂号的第一天的数据
let workTime:any=ref({})
// 存储排版医生的数据
let workArr=ref<DocArr>([])
// 组件挂在完毕发请求
onMounted(() => {
  fetchWorkData();
});
const fetchWorkData = async () => {
  let res: HospitalWorkerData = await reqHospitalWorker(
    pageNo.value,
    limit.value,
    $route.query.hoscode as string,
    $route.query.depcode as string
  );
  if (res.code == 200) {
    workData.value = res.data;
    // 获取第一天的数据
    workTime.value=workData.value.bookingScheduleList[0];
    workTimeData()
  }
};
// 获取排版数据的方法
const workTimeData=async()=>{
    let hoscode:string=$route.query.hoscode as string ;
    let depcode:string=$route.query.depcode as string;
    let workDate:string=workTime.value.workDate;
    let res:HospitalDoctorResponseData=await reqHospitalDoctor(hoscode,depcode,workDate)
    if(res.code==200){
        workArr.value=res.data;
        console.log(workArr.value);
    }
}
// 点击顶部某一日触发
const changeTime=(item:any)=>{
    workTime.value=item;
    workTimeData()
    console.log(workTime.value);
}
// 计算出上午排班医生的数据
let moringArr=computed(()=>{
    return workArr.value.filter((doc:HospitalDoctor)=>{
        return doc.workTime==0;
    })
})
// 计算出下午排班医生的数据
let afterArr=computed(()=>{
    return workArr.value.filter((doc:HospitalDoctor)=>{
        return doc.workTime==1;
    })
})
</script>
<style lang="scss" scoped>
.wrap {
  .top {
    display: flex;
    color: #7f7f7f;
    .line {
      width: 3px;
      height: 20px;
      background: skyblue;
      margin: 0px 5px;
    }
    .dot {
      margin: 0px 8px;
      color: skyblue;
    }
  }
  .center {
    margin: 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .time {
      font-weight: 900;
    }
    .container {
      width: 100%;
      display: flex;
      margin: 20px 0px;
      .item {
        flex: 1;
        border: 1px solid skyblue;
        margin: 0px 5px;
        &.active {
          border: 1px solid #ccc;
          color: #7f7f7f;
          .top1 {
            background: #ccc;
          }
        }
        &.cur{
            transform: scale(1.1);
        }
        .top1 {
          width: 100%;
          text-align: center;
          background-color: red;
          height: 30px;
        }
        .bottom {
          width: 100%;
          height: 60px;
          text-align: center;
          line-height: 60px;
        }
      }
    }
  }
  .bottom {
    .will {
      text-align: center;
      font-weight: 900;
      font-size: 30px;
      .time {
        color: red;
      }
    }
    .doctor {
      .am, .pm {
        .tip {
            display: flex;
            align-items: center;
            span{
                font-size: 18px;
            }
        }
        .docInfo {
          display: flex;
          justify-content: space-between;
          margin: 10px 0px;
          border-bottom:1px solid #7f7f7f;
          .left{
            display: flex;
            flex-direction: column;
            align-items: start;
            .info{
                color: skyblue;
                margin: 10px 0;
                span{
                    margin: 0 5px;
                    font-size: 18px;
                    font-weight: 900;
                }
            }
            .skill{
                margin: 10px 0;
                color: #7f7f7f;
            }
          }
          .right{
            width: 150px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
